<!DOCTYPE html>
<html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		@import url(./../lib/Cesium/Widgets/widgets.css);

		body,
		html,
		#map {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
		#mytoolbar{
			padding: 10px;
			position: absolute;
			top: 10px;
			background: aliceblue;
			left: 30px;
			width: 150px;
		}
	</style>

	<script src="./../lib/Cesium/Cesium.js"></script>
	<title>canvas billboard </title>
</head>

<body onload="onload()">
	<div id="map"></div>
	<div id='mytoolbar'>
		<a>extrudedHeight:</a><input type="range" min="1100" max="5000" data-bind="value:extrudedHeight,valueUpdate: 'input'" />
		<a>fill:</a><input type="checkbox" checked =true data-bind="checked:fill,valueUpdate: 'input'" />
	</div>
	<img id="banner" src="./../img/cesium/c1_1.png" />
</body>

</html>
<script type="text/javascript">

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NTFhMDMwMi02YWVjLTRmNmItOThjNS00MDI1YTVkNjdhODciLCJpZCI6NTY0Miwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzgyNzA5MH0.4OIh4gPgWSceyKB4iHliAX59933ryNrXBwVut46WE78'
 //参考：https://blog.csdn.net/supermapsupport/article/details/103694193
	function onload() { 
		const viewer = new Cesium.Viewer("map", {
			animation: true, //是否创建动画小器件，左下角仪表
			baseLayerPicker: false, //是否显示图层选择器
			fullscreenButton: false, //是否显示全屏按钮
			geocoder: false, //是否显示geocoder小器件，右上角查询按钮
			homeButton: false, //是否显示Home按钮
			infoBox: false, //是否显示信息框
			sceneModePicker: false, //是否显示3D/2D选择器
			selectionIndicator: false, //是否显示选取指示器组件
			timeline: true, //是否显示时间轴
			sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
			navigationHelpButton: false, //是否显示右上角的帮助按钮
			scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
			navigationInstructionsInitiallyVisible: false,
			showRenderLoopErrors: false
		})
		viewer.scene.globe.depthTestAgainstTerrain = false;
		//去除版权信息
		viewer._cesiumWidget._creditContainer.style.display = 'none';
		
		let startTime=Cesium.JulianDate.fromDate(new Date('2020-03-19 00:00:00.00')),
		endTime=Cesium.JulianDate.fromDate(new Date('2020-03-21 00:00:00.00'));


		function initDate(){

			viewer.clock.startTime = startTime.clone();//UTC;
        	viewer.clock.stopTime = endTime.clone();//UTC
			viewer.clock.currentTime = startTime.clone();
        	viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;  
			viewer.clock.shouldAnimate = true;
		}

		function addPolygon(text, lnglat) {
			var colorProperty = new Cesium.SampledProperty(Cesium.Color);

			colorProperty.addSample(startTime.clone(), 
				new Cesium.Color.fromCssColorString("rgba(0,0,255,.5)"));

			colorProperty.addSample(endTime.clone(), 
				new Cesium.Color.fromCssColorString("rgba(255,0,255,.5)"));	

			// colorProperty.addSample(startTime, 
			// 	new Cesium.Color(0,1,0));

			// colorProperty.addSample(endTime, 
			// 	new Cesium.Color(0,0,1));	


			var entity = viewer.entities.add({ 
				position: Cesium.Cartesian3.fromDegrees(...lnglat),
				polygon: {
					hierarchy:{
						positions:Cesium.Cartesian3.fromDegreesArray([103.842575,30.795808,104.394638,30.728545,104.394638,30.728545,103.626969,30.584419]),
					},
					// material: Cesium.Color.RED.withAlpha(0.5),
					material: new Cesium.ColorMaterialProperty(colorProperty),
					// material:'../img/cesium/c1_3.jpg',
					height: 1000.0,//离地高度
  					extrudedHeight: 1500.0, //实体高度 = extrudedHeight - height
					// fill:false,
					outline:true,
					outlineColor: Cesium.Color.fromCssColorString("rgba(255,0,255,.5)"),
					outlineWidth:1000
				}
			});
			
			return entity
		}

		initDate();
		let cdE = addPolygon("成都", [104.058182, 30.673637, 50])
		viewer.clock.tick();
		// addBillBoard("绵阳",[104.741722,31.46402,50])
		// addBillBoard("广元",[105.829757,32.433668,50])
		viewer.flyTo(cdE)

		var viewModel = {
					extrudedHeight: 1100, 
					fill:true
                };
        Cesium.knockout.track(viewModel);
       
        var toolbar = document.getElementById('mytoolbar');
        Cesium.knockout.applyBindings(viewModel, toolbar);
				Cesium.knockout.getObservable(viewModel, "extrudedHeight").subscribe(function(value) {
					cdE.polygon.extrudedHeight=Number(value);
                    }); 
					Cesium.knockout.getObservable(viewModel, "fill").subscribe(function(value) {
					cdE.polygon.fill=value
                    }); 
					Cesium.knockout.dependentObservable(function () {
		let exHeight =Number(viewModel.extrudedHeight)*0.01;
		cdE.polygon.material= new Cesium.Color(exHeight/255*10, exHeight/255*30, exHeight/255*50, 1);
			})
	}

</script>